<template>
  <div>
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="5" style="height: 100%">
        <el-card style="height: 100%">
 <el-button-group circle style="margin-bottom: 5px">
            <el-button type="primary" icon="el-icon-plus" style="padding:8px" ></el-button>
            <el-button type="primary" icon="el-icon-edit" style="padding:8px" ></el-button>
            <el-button type="primary" icon="el-icon-delete" style="padding:8px"></el-button>
          </el-button-group>
      <el-input style="margin-bottom: 5px" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <el-tree 
          v-loading="treeLoading" 
          :data="groupTreeData" 
          class="filter-tree tree-scroll" 
          :props="defaultProps"
          node-key="nodeId" 
          :default-expanded-keys="[-1]" 
          highlight-current 
          @node-click="handleNodeClick"
          :expand-on-click-node="false" 
          :filter-node-method="filterNode"
          ref="groupTree">
          </el-tree>
    </el-card>
      </el-col>


     
      <el-col  :span="19" style="padding-left: 0">
         <el-card>
          <el-form inline>
            <el-form-item label="简称:" class="mgb-0">
              <el-input v-model="fname"></el-input>
            </el-form-item>
            <el-form-item label="编码:" class="mgb-0">
              <el-input v-model="fnumber"></el-input>
            </el-form-item>
            <el-form-item class="mgb-0">
              <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
              <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top: 10px">
 <div style="margin-bottom: 10px">
          <el-button type="success" @click="openAdd" icon="el-icon-plus">新增</el-button>
          <el-button type="primary" @click="batchEnable(0)" icon="el-icon-check">启用</el-button>
          <el-button type="info" @click="batchEnable(1)" icon="el-icon-close">禁用</el-button>
          <el-button type="danger" @click="batchEnable(2)" icon="el-icon-delete">删除</el-button>
        </div>
 <el-table border :data="dataList" v-loading="tableLoading" ref="iTable1" @row-click="handleRowClick">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column label="编码" prop="fnumber" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
             <el-table-column label="属性" prop="ftype" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                <el-tag v-if="scope.row.ftype =='原材料'" type="success">原材料</el-tag>
                <el-tag v-if="scope.row.ftype =='半成品'" type="danger">半成品</el-tag>
                <el-tag v-if="scope.row.ftype =='产成品'" type="primary">产成品</el-tag>
              </template>

             </el-table-column>
            <el-table-column label="简称" prop="fsimplename" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" align="center" show-overflow-tooltip width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.fstatus =='启用'" type="success">启用</el-tag>
                <el-tag v-if="scope.row.fstatus =='禁用'" type="danger">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="openDetail(scope.row.fid)">详情</el-button>
                <el-button type="text" v-if="scope.row.fstatus =='禁用'" @click.stop="openEdit(scope.row.fid)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
<el-pagination style="float:right; margin: 10px 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="totalRows">
          </el-pagination> 
        </el-card> 
       
      </el-col>
      
    </el-row>


    <!--新增-->
     <material-addEdit v-if="isShowMaterialAddEdit" :fid="fid" :status="status" :fgroupid="fgroupId" :isview="isview" @close="closeAddEdit" @notRefresh="notRefresh"></material-addEdit>
  </div>
</template>

<script>
import MaterialApi from "@/api/material/MaterialApi"
import MaterialGroupApi from "@/api/material/MaterialGroupApi"
import { flatTurnTree } from '@/utils/DataTypeConvert'
export default {
  name: 'xuMaPack',
  components: {
    MaterialAddEdit: resolve => require(['./components/material_addEdit'], resolve),
  },
  watch: {
    filterText (val) {
      this.$refs.groupTree.filter(val);
    }
  },
  data () {

    return {
      groupTreeData: [],
      filterText: '',
      findText:'',
      defaultProps: {
        children: 'children',
        label: 'nodeName'
      },
      fname:'',
      fnumber:'',
      fgroupId: 0,
      fparentgroupId: 0,
      treeLoading: false,
      tableLoading: false,
      dataList: [],
      page: 1, //当前页面
      pageSize: 10, // 当前页数
      totalRows: 0, // 总条数
      fid: 0,
      isShowMaterialAddEdit: false,
      services: new MaterialApi(),
    }
  },
  async created () {
    let http = new MaterialGroupApi()
    this.treeLoading = true
    let groupTreeData = await http.queryGroupTree({})
    this.groupTreeData = flatTurnTree(groupTreeData.data, 'nodeId', 'nodePid', -2)
    console.log(this.groupTreeData);
    this.treeLoading = false
    this.getData();
  },
 
  methods: {
      getData () {
      let http = new MaterialApi()
      this.tableLoading = true
      
      let data = {
        fname: this.fname,
        fnumber: this.fnumber,
        fgroupid: this.fgroupId,
        pageSize: this.pageSize,
        page: this.page,
      }
      http.queryListPage(data).then(res => {
        this.dataList = res.data.rows
        this.page = res.data.page
        this.pageSize = res.data.pageSize
        this.totalRows = res.data.totalRows
        this.tableLoading = false
      })
      
    },
   filterNode (value, data) {
      if (!value) return true;
      return data.nodeName.indexOf(value) !== -1;
    },
     handleNodeClick (val) {
      if (val.nodeId === -1) {
        this.fgroupId = 0
        this.getData()
      } else {
        this.fgroupId = val.nodeId
       
      }
      this.page = 1
      this.getData()
    },
     handleRowClick (row, column, event) {
      this.$refs.iTable1.toggleRowSelection(row)
    },
     openAdd () {
      if (!this.fgroupId) {
        this.$message.error('请选择分类!')
        return
      }
      this.fid = null
      this.isview = false
      this.status = 'add'
      this.isShowMaterialAddEdit = true
    },
    //打开编辑弹窗
    openEdit (id) {
      this.fid = id
      this.isview = false
      this.status = 'edit'
      this.isShowMaterialAddEdit = true
    },
    //关闭新增编辑弹窗
    closeAddEdit () {
      this.isShowMaterialAddEdit = false
      this.fid = ''
      this.fgroupId = 0
      this.getData()
    },
    notRefresh () {
      this.isShowMaterialAddEdit = false
      this.fid = ''
    },
    //打开详情弹窗
    openDetail (id) {
      this.fid = id
      this.isview = true
      // this.isShowDetail = true
      this.status = 'view'
      this.isShowMaterialAddEdit = true
    },
    //关闭详情弹窗
    closeDetail () {
      this.fid = ''
      // this.isShowDetail = false
      this.isShowMaterialAddEdit = false
    },
    batchEnable (status) {
      var fids = this.getSelectIdByTable();
      if (fids.length == 0) {
        this.$message.error('未选中数据!')
      } else {
        const loading = this.$loading({
          lock: true,
          text: `批量操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.services.batchChangeState({ "fid": fids, "fstatus": status }).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close();
          this.getData();
        }).catch(e => {
          loading.close();
        })
      }
      this.getData()
    },
    batchRemove () {
      var fids = this.getSelectIdByTable();
      if (fids.length == 0) {
        this.$message.error('未选中数据!')
      } else {
        const loading = this.$loading({
          lock: true,
          text: `批量操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.services.batchDelete({ "fid": fids }).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close();
          this.getData();
        }).catch(e => {
          loading.close();
        })
      }
    },
     getSelectIdByTable () {
      var batchChoose = this.$refs.iTable1.selection;
      var fids = [];
      for (var i = 0; i < batchChoose.length; i++) {
        fids[i] = batchChoose[i].fid;
      }
      return fids;
    },
    handleCurrentChange (page) {
      this.page = page
      this.getData()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getData()
    },
    async refreshAll () {
      this.treeLoading = true
      let http = new MaterialGroupApi();
      this.groupTreeData = [];
      this.groupTreeData = await http.queryGroupTree({});
      this.groupTreeData = flatTurnTree(this.groupTreeData.data, 'nodeId', 'nodePid', -2);
      this.treeLoading = false
      this.getData();
    },
    searchData () {
      this.page = 1
      this.getData()
    },
    clearData () {
     this.fname = null
     this.fnumber = null
    },
    
}
}
</script>

<style scoped lang="scss" >
/deep/.tree-scroll {
  height: 93%;
  overflow: scroll;
}
/deep/ .el-card__body {
  height: 100%;
}
</style>
